<template>
<!--个人信息组件-->
    <div class="profile">
        <!-- <header id="wx-header">
            <div class="center">
                <router-link to="/self" tag="div" class="iconfont icon-return-arrow">
                    <span>我</span>
                </router-link>
                <span>个人信息</span>
            </div>
        </header> -->
        <div class="weui-cells">
            <div class="weui-cell" id="avatarCell">
                <div class="weui-cell__bd">
                    <p>头像</p>
                </div>
                <div class="weui-cell__ft">
                    <img :src="myInfo.headimg" style="width: 50px;height: 50px;border-radius: 4px;">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>昵称</p>
                </div>
                <div class="weui-cell__ft">
                    {{myInfo.nickname}}
                </div>
            </div>
            <div class="weui-cell" v-if="myInfo.nickname!=myInfo.name">
                <div class="weui-cell__bd">
                    <p>真实姓名</p>
                </div>
                <div class="weui-cell__ft">
                    {{myInfo.name}}
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>用户ID</p>
                </div>
                <div class="weui-cell__ft">
                     {{myInfo.id}}
                </div>
            </div>
            <!-- <router-link to="/self/profile/my-qrcode" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p>我的二维码</p>
                </div>
                <div class="weui-cell__ft">
                    <img src="../../assets/images/contact_add-friend-my-qr.png" style="vertical-align: middle;;width:24px" class="_align-middle">
                </div>
            </router-link>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>我的地址</p>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div> -->
        </div>

        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>性别</p>
                </div>
                <div class="weui-cell__ft">
                    {{myInfo.sex==0?'保密':(myInfo.sex==1?'男':'女')}}
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>地区</p>
                </div>
                <div class="weui-cell__ft">
                    {{myInfo.area}}
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p @click="play()">个性签名</p>
                </div>
                <div class="weui-cell__ft">
                    {{myInfo.signature?myInfo.signature:'未填写'}}
                </div>
            </div>
        </div>

        <!-- <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>LinkedIn帐号</p>
                </div>
                <div class="weui-cell__ft">
                    未设置
                </div>
            </div>
        </div> -->
            <div class="weui-btn-area">
                <button class="weui-btn weui-btn_warn" id="exitBtn" @click="logOut">退出登录</button>
            </div>
    </div>
</template>
<script>
import {ApiGetMyInfo} from '@/api/api/main'
import Storage from '@/utils/storage'

    export default {
        data() {
            return {
                pageName: "个人信息",
                // myInfo:{},//基本信息
            }
        },
        mounted(){
            this.init()
        },
        computed:{
            //个人信息
            myInfo(){
                return this.$store.state.userInfo || {};
            }
        },
        methods:{
            //获取个人信息
            init(){
                //有缓存就不加载
                if(this.$store.state.userInfo?.id){
                    return false;
                }
               ApiGetMyInfo().then(({data})=>{
                    this.$store.commit('setData',{key:'userInfo',value:data})
               })
            },
            //退出登录
            logOut(){
                // 断开im
                

                // 清理token
                this.$store.commit('logOut')
                Storage.set('token','')

                // 回到登录界面
                this.$router.push('/login')
            },
            play(){
                this.$store.state.msgList.newMessage = true;
            },
        }
    }
</script>